<template>
  <div class="app-container">
    <QueryForm v-model="queryForm" :form-items="formItems" @query="handleQuery" @reset="handleReset" />

    <!-- <div class="query-form">
        <el-form ref="form" :inline="true" :model="queryForm">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="queryForm.roleName" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getRoleList">查询</el-button>
            <el-button @click="handleReset('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div> -->

    <div class="base-table">
      <div class="action">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="operate('add')">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" @click="handlePatchDel">批量删除</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
          :width="item.width" :formatter="item.formatter">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <div class="operate">
              <!-- <div class="operate-btn" @click="operate('add', scope.row)">
                                <el-icon :size="12" color="#409efc">
                                    <FolderAdd />
                                </el-icon>
                                新增
                            </div> -->
              <div class="operate-btn" @click="operate('edit', scope.row)" size="mini">
                <el-icon :size="12" color="#409efc">
                  <Edit />
                </el-icon>
                编辑
              </div>
              <div class="operate-btn" @click="handleDel(scope.row._id)">
                <el-icon :size="12" color="#409efc">
                  <Delete />
                </el-icon>
                删除
              </div>
              <div class="operate-btn" @click="setPermission(scope.row)">
                <!-- <el-icon :size="12" color="#409efc">
                  <Delete />
                </el-icon> -->
                配置权限
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="pagination" background layout="prev, pager, next" :total="pager.total"
        :page-size="pager.pageSize" @current-change="handleCurrentChange" />
    </div>
    <RoleAdd v-if="showModal" v-model:show="showModal" :action="action" :Item="selectItem" @close="handleClose">
    </RoleAdd>
    <Permission v-model:show="showPermission" v-if="showPermission" :Item="selectItem" @close="handleClose">
    </Permission>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import utils from "@/utils/utils"
import QueryForm from "@/components/QueryForm/index.vue"
import { ElMessage } from 'element-plus'
import RoleAdd from "./component/RoleAdd.vue"
import Permission from "./component/Permission.vue"
const action = ref('add')
const selectItem = ref({})// 选中项
const { proxy } = getCurrentInstance();
const $Tajax = proxy.$Tajax;
// 查询表单配置
const formItems = [
  {
    type: 'input',
    label: '用户ID',
    prop: 'roleName',
    placeholder: '请输入角色名称'
  }
]
// 表格列配置
const columns = [
  {
    label: "角色名称",
    prop: "roleName",
  },
  {
    label: "备注",
    prop: "remark",
  },
  {
    label: "角色编码",
    prop: "roleCode",
    width: 200,
  },
  {
    label: "更新时间",
    prop: "updateTime",
    formatter(row, column, value) {
      return utils.formateDate(new Date(value));
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    formatter(row, column, value) {
      return utils.formateDate(new Date(value));
    },
  },
]
// 响应式状态
const queryForm = reactive({})
const dataList = ref([])
// 初始化分页对象
const pager = reactive({
  pageNum: 1,
  pageSize: 10,
});
// 选中用户列表对象
const checked_ids = ref([]);
const showModal = ref(false)
const showPermission = ref(false)
// 方法定义
const handleQuery = () => {
  console.log(queryForm)
  getdataList()
}
// 分页事件处理
const handleCurrentChange = (current) => {
  pager.pageNum = current;
  getdataList();
};
// 列表初始化
const getdataList = async () => {
  let params = { ...queryForm, ...pager };
  try {
    const { list, page } = await $Tajax.getRoleList(params)
    dataList.value = list;
    pager.total = page.total;
  } catch (e) {
    throw new Error(e)
  }
}
// 表格多选
const handleSelectionChange = (list) => {
  let arr = [];
  list.map((item) => {
    arr.push(item._id);
  });
  checked_ids.value = arr;
};

// 表单重置
const handleReset = () => {
  this.getdataList()
}

// 新增\编辑
const operate = (type, row) => {
  action.value = type
  selectItem.value = row
  setTimeout(() => {
    showModal.value = true
  }, 100)
}

// 批量删除
const handlePatchDel = async () => {
  if (checked_ids.value.length == 0) {
    proxy.$message.error("请选择要删除的用户");
    return;
  }
  const res = await proxy.$Tajax.roleOperate({
    _ids: checked_ids.value, //可单个删除，也可批量删除
    action: "delete"
  });
  if (res.deletedCount > 0) {
    proxy.$message.success("删除成功");
    getdataList();
  } else {
    proxy.$message.success("修改失败");
  }
};
// 删除
const handleDel = async (_id) => {
  if (checked_ids.value.length == 0) {
    proxy.$message.error("请选择要删除的用户");
    return;
  }
  const res = await proxy.$Tajax.roleOperate({
    _ids: checked_ids.value, //可单个删除，也可批量删除
    action: "delete"
  });
  if (res.deletedCount > 0) {
    proxy.$message.success("删除成功");
    getdataList();
  } else {
    proxy.$message.success("修改失败");
  }
  getdataList()
}

// 弹框关闭
const handleClose = (e) => {
  showModal.value = false
  if (e) {
    getdataList()
  }
}

const setPermission = (row) => {
  selectItem.value = row
  showPermission.value = true
  console.log(showPermission.value)
}

// 生命周期钩子
onMounted(() => {
  getdataList()
})
</script>

<style lang="scss"></style>